<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>

<!-- Sets initial viewport load and disables zooming  -->
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Include the compiled Ratchet CSS -->
<link href="../rachet/css/ratchet.css" rel="stylesheet">

<!-- Include the compiled Ratchet JS -->
<script src="../rachet/js/ratchet.js"></script>
</head>
<body>

	<!-- Make sure all your bars are the first things in your <body> -->
	<header class="bar bar-nav">
		<a class="icon icon-left-nav pull-left" href="./index.html"
			data-transition="slide-out"></a> <a href="#myModalexample"
			class="icon icon-compose pull-right"></a>
		<h1 class="title">XX水果店-商品管理</h1>
	</header>

	<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
	<div class="content">
		<div class="card">
			<ul class="table-view">
				<li class="table-view-cell media"><a class="navigate-right">
						<img class="media-object pull-left"
						src="http://placehold.it/42x42">
						<div class="media-body">
							Item 1
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
								sed do eiusmod tempor incididunt ut labore et dolore. Lorem
								ipsum dolor sit amet.</p>
							<span class="badge">5</span>
						</div>
				</a></li>
				<li class="table-view-cell media"><a class="navigate-right">
						<img class="media-object pull-left"
						src="http://placehold.it/42x42">
						<div class="media-body">
							Item 1
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
								sed do eiusmod tempor incididunt ut labore et dolore. Lorem
								ipsum dolor sit amet.</p>
						</div>
				</a></li>
				<li class="table-view-cell media"><a class="navigate-right">
						<img class="media-object pull-left"
						src="http://placehold.it/42x42">
						<div class="media-body">
							Item 1
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
								sed do eiusmod tempor incididunt ut labore et dolore. Lorem
								ipsum dolor sit amet.</p>
						</div>
				</a></li>
			</ul>
		</div>
	</div>

	<div id="myModalexample" class="modal">

		<form class="input-group">
			<header class="bar bar-nav">
				<a class="icon icon-close pull-right" href="#myModalexample"></a>
				<h1 class="title">创建商品</h1>
			</header>
			<div class="content">
				<div class="card">

					<div class="input-row">
						<label>Full name</label> <input type="text"
							placeholder="Mister Ratchet">
					</div>
					<div class="input-row">
						<label>Email</label> <input type="email"
							placeholder="ratchetframework@gmail.com">
					</div>
					<div>
						<label>Username</label> <select><option>1</option>
							<option>11</option></select>
					</div>
					<div class="content-padded">
						<button class="btn btn-positive btn-block ">保存</button>
						
					</div>
				</div>
			</div>
		</form>
	</div>

</body>
</html>